<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
::-webkit-file-upload-button { background-color: rgb(192, 192, 192) }
.theme ::-webkit-file-upload-button { background-color: green }
.other #t2 { background-color: lime }
</style>
<div id="t">
    <div></div>
    <div></div>
    <div id="t2"></div>
    <div></div>
    <div></div>
    <input type="file"></input>
</div>
<script>
description("Check that targeted class invalidation works for custom pseudo elements.");

shouldBeTrue("!!window.internals");

if (window.internals) {
    var gray = "rgb(192, 192, 192)";
    var green = "rgb(0, 128, 0)";
    var lime = "rgb(0, 255, 0)";

    fileUploadButton = internals.shadowRoot(document.querySelector("input")).firstChild;
    t2 = document.getElementById("t2");

    shouldBe("getComputedStyle(fileUploadButton, null).backgroundColor", "gray");

    document.body.offsetLeft; // force style recalc.

    document.getElementById("t").className = "theme";
    document.getElementById("t").classList.add("other");

    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
    shouldBe("getComputedStyle(fileUploadButton, null).backgroundColor", "green");
    shouldBe("getComputedStyle(t2, null).backgroundColor", "lime");
}
</script>
